<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lijincheng
  Date: 2021/5/9
  Time: 4:03 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>我的订单列表</title>
    <!-- CUSTOM STYLE -->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/order/style.css" rel="stylesheet">
    <!-- THEME TYPO -->
    <link href="/css/themetypo.css" rel="stylesheet">
    <!-- BOOTSTRAP -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <!-- COLOR FILE -->
    <link href="/css/color.css" rel="stylesheet">
    <!-- FONT AWESOME -->
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <!-- BX SLIDER -->
    <link href="/css/jquery.bxslider.css" rel="stylesheet">

    <link href="/css/bootstrap-slider.css" rel="stylesheet">

    <link href="/css/widget.css" rel="stylesheet">

    <link href="/css/shortcode.css" rel="stylesheet">
    <!-- responsive -->
    <link href="/css/responsive.css" rel="stylesheet">
    <!-- Component -->
    <link href="/js/dl-menu/component.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="loader-wrapper">
    <div id="loader"></div>

    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>

</div>
<!--WRAPPER START-->
<div class="wrapper kode-header-class-3">
    <!--HEADER START-->
    <header class="header-3">
        <div class="container">
            <div class="logo-container">
                <div class="row">
                    <div class="col-md-3">
                        <!--LOGO START-->
                        <div class="logo">
                            <a href="#"><img src="/images/logo-2.png" alt=""></a>
                        </div>
                        <!--LOGO END-->
                    </div>
                    <div class="col-md-9">
                        <div class="top-strip">
                            <div class="pull-left">
                                <p>Welcome to Library theme</p>
                            </div>
                            <div class="social-icon">
                                        <li><a href="#" class="pull-left">欢迎 ${sessionScope.user.getUName()}</a></li>

                            </div>
                        </div>
                        <div class="kode-navigation">
                            <ul>
                                <li><a href="/">主页</a>
                                    <ul>
                                        <li><a href="/">主页</a></li>
                                    </ul>
                                </li>
                                        <li><a href="/ubook/myBooks">图书管理</a>
                                            <ul>
                                                <li><a href="/ubook/post/index">发布图书</a></li>
                                                <li><a href="/ubook/myBooks">我的发布记录</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="/shop/car/index">购物车</a>
                                            <ul>
                                                <li><a href="/shop/car/index">我的购物车</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="/order/index">订单管理</a>
                                            <ul>
                                                <li><a href="/order/index">所有订单</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="/user/userInfo/#caa">个人中心</a>
                                            <ul>
                                                <li><a href="/user/userInfo/#caa">个人信息</a></li>
                                                <li><a href="/browse/history/list">我的浏览记录</a></li>
                                                <li><a href="/user/loginout">退出登陆</a></li>
                                            </ul>
                                        </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--HEADER END-->
    <!--BANNER START-->
    <div class="kode-inner-banner" style="background-image: url('/images/style2-blog.png')">
        <div class="kode-page-heading">
            <h2>我的订单</h2>
            <ol class="breadcrumb">
                <li><a href="#">主页</a></li>
                <li class="active">我的订单</li>
            </ol>
        </div>
    </div>
    <!--BANNER END-->
    <!--CONTENT START-->
    <div class="kode-content">
        <!--TOP AUTHERS START-->
        <div class="container" style="width: 90%">
            <div class="row">
                <div class="col-sm-4">
                    <div class="input-group">
                        <label class="input-group-addon">名称</label>
                        <input type="text" id="name" class="form-control">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group">
                        <label class="input-group-addon">状态</label>
                        <select class="form-control" id="status">
                            <option value="">全部</option>
                            <option value="1">已完成</option>
                            <option value="0">待交易</option>
                            <option value="2">已取消</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="input-group">
                        <button onclick="search_order()" class="btn btn">
                            查询
                        </button>
                    </div>
                </div>
            </div>
            <div class="shopping-car-container">
                <div class="car-headers-menu">
                    <div class="row">
                        <div class="col-lg-3 car-menu" style=" ">订单编号</div>
                        <div class="col-lg-3 car-menu">订单时间</div>
                        <div class="col-lg-1 car-menu">金额</div>
                        <div class="col-lg-1 car-menu">状态</div>
                        <div class="col-lg-3 car-menu">操作</div>
                    </div>
                </div>
                <div class="goods-content" id="order_list">
                    <!--goods display-->
                    <c:forEach items="${orderVos}" var="vo">
                        <div class="goods-item">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="col-md-3 car-goods-info goods-image-column">
                                            ${vo.orderNo}
                                    </div>
                                    <div class="col-md-3 car-goods-info goods-params">
                                            ${vo.createTime}
                                    </div>
                                    <div class="col-md-1 car-goods-info goods-price"><span>￥</span><span
                                            class="single-price">${vo.price}</span></div>

                                    <div class="col-md-1 car-goods-info goods-money-count">${vo.statusValue}</div>
                                    <div class="col-md-4 car-goods-info goods-operate">
                                        <a href="/order/detail/${vo.id}">
                                            <button type="button" class="btn btn-info item-delete">查看</button>
                                        </a>
                                        <div style="width: 5px"></div>
                                        <c:if test="${vo.status != 1 && vo.status != 2}">
                                            <a href="/order/ok/${vo.id}">
                                                <button type="button" class="btn btn-danger item-delete">确认</button>
                                            </a>
                                            <div style="width: 5px"></div>
                                            <a href="/order/cancel/${vo.id}">
                                                <button type="button" class="btn btn-danger item-delete">取消</button>
                                            </a>
                                        </c:if>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </c:forEach>
                </div>
            </div>
        </div>
        <!--TOP AUTHERS END-->
    </div>
    <!--CONTENT END-->
    <div class="copyrights">
        <div class="container">
            <p>Copyrights © 2015-16 KodeForest. All rights reserved</p>
            <div class="cards"><img src="/images/cards.png" alt=""></div>
        </div>
    </div>
</div>
<!--WRAPPER END-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/dl-menu/modernizr.custom.js"></script>
<script src="/js/dl-menu/jquery.dlmenu.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<script src="/js/bootstrap-slider.js"></script>
<script src="/js/waypoints.min.js"></script>
<script src="/js/jquery.counterup.min.js"></script>
<script src="/js/functions.js"></script>
<script>
    function search_order() {
        var text = $("#name").val();
        var statu = $("#status").val();
        $.ajax({
            type: "POST",
            data: {"text": text, "status": statu},
            url: "/order/search",
            success: function (data) {
                console.log(data);
                if (data.code == 0) {
                    var ds = data.data;
                    if (ds == null) {
                        var cs = "没有找到匹配记录";
                        $("#order_list").html(cs);
                        return;
                    }
                    var targetData = '';
                    for (let i = 0; i < ds.length; i++) {
                        let d = ds[i];
                        targetData += '<div class="goods-item">\n' +
                            '                            <div class="panel panel-default">\n' +
                            '                                <div class="panel-body">\n' +
                            '                                    <div class="col-md-3 car-goods-info goods-image-column">\n' +
                            '                                            ' + d.orderNo + '\n' +
                            '                                    </div>\n' +
                            '                                    <div class="col-md-3 car-goods-info goods-params">\n' +
                            '                                            ' + d.createTime + '\n' +
                            '                                    </div>\n' +
                            '                                    <div class="col-md-1 car-goods-info goods-price"><span>￥</span><span\n' +
                            '                                            class="single-price">' + d.price + '</span></div>\n' +
                            '                                    <div class="col-md-1 car-goods-info goods-money-count">' + d.statusValue + '</div>\n' +
                            '                                    <div class="col-md-4 car-goods-info goods-operate">\n' +
                            '                                        <a href="/order/detail/' + d.id + '">\n' +
                            '                                            <button type="button" class="btn btn-info item-delete">查看</button>\n' +
                            '                                        </a>\n' +
                            '                                        <div style="width: 5px"></div>\n';
                        if (d.status == 0) {
                            targetData += ' <a href="/order/ok/' + d.id + '">\n' +
                                ' <button type="button" class="btn btn-danger item-delete">确认</button>\n' +
                                ' </a>\n' +
                                ' <div style="width: 5px"></div>\n' +
                                ' <a href="/order/cancel/' + d.id + '">\n' +
                                ' <button type="button" class="btn btn-danger item-delete">取消</button>\n' +
                                ' </a>\n';
                        }
                        targetData += '  </div>\n' +
                            '  </div>\n' +
                            '  </div>\n' +
                            '  </div>';
                    }
                    $("#order_list").html(targetData);
                } else {
                    var cs = "查找失败，请重新查找";
                    $("#order_list").html(cs);

                }

            }
        });
    }
</script>
</body>
</html>